<div draggable mat-dialog-title>
  <h6>{{"editPbasicInfo" | translate}} - {{person.personName}}</h6>
</div>

<div mat-dialog-content class="wdl-dialog-content">
  <form [formGroup]="basicForm" class="form-container" novalidate autocomplete="off">
    <mat-grid-list cols="6" rowHeight="70px" gutterSize="10">
      <mat-grid-tile colspan="3">
        <mat-form-field>
          <input formControlName="personName" matInput placeholder="{{'name' | translate}}">
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="1">
        <mat-form-field>
          <mat-select formControlName="sex" placeholder="{{'sex' | translate}}">
            <mat-option value="male">{{'male' | translate}}</mat-option>
            <mat-option value="female">{{'female' | translate}}</mat-option>
          </mat-select>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2">
        <mat-form-field>
          <input formControlName="birth" matInput [matDatepicker]="dp" placeholder="{{'birth' | translate}}">
          <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
          <mat-datepicker #dp></mat-datepicker>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="3">
        <mat-form-field>
          <input formControlName="rid" matInput placeholder="{{'rid' | translate}}">
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="3">
        <mat-form-field>
          <mat-select formControlName="education" placeholder="{{'education' | translate}}">
            <mat-option value="none">{{'none' | translate}}</mat-option>
            <mat-option value="primary">{{'primary' | translate}}</mat-option>
            <mat-option value="middle">{{'middle' | translate}}</mat-option>
            <mat-option value="college">{{'college' | translate}}</mat-option>
          </mat-select>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="3">
        <mat-form-field>
          <input formControlName="phone" matInput placeholder="{{'phone' | translate}}">
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="3">
        <mat-form-field>
          <input formControlName="nation" matInput placeholder="{{'nation' | translate}}">
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="6">
        <mat-form-field>
          <input formControlName="address" matInput placeholder="{{'address' | translate}}">
        </mat-form-field>
      </mat-grid-tile>
    </mat-grid-list>
  </form>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="dialogRef.close('Close')">{{'close' | translate}}</button>
  <button mat-button (click)="submit()" [disabled]="!basicForm.dirty">{{'submit' | translate}}</button>
</div>
